<!-- <!DOCTYPE html> -->
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				background-image: url(textures/background.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			/* 头部三个框框 */
			#top{
				width: 100%;
				height: 46px;
				margin-left: -4px;
			}
			#ul{
				width: 90%;
				height: 44px;
				margin-top: -5px;
			}
			.img{
				width: 28%;
				height: 34px;
				float: left;
				margin-top: 8px;
				position: fixed;
			}
			ul li{
				list-style: none;
			}
			#li1{
				width: 100%;
				margin-left: -28px;
			}
			.img1{
				left: 38%;
			}
			.img2{
				left: 72%;
			}
			#img1,#img2,#img3{
				height: 42px;
				width: 45px;
				position: absolute;
			}
			#img1{
				margin-left: -14px;
				margin-top: 2px;
			}
			#span1{
				color: #fff;
				font-size: 14px;
				position: absolute;
				line-height: 46px;
			}
			.span2,.span3{
				color: #f6f877;
				position: absolute;
			}
			.span2{
				line-height: 48px;
				font-size: 12px;
				margin-left: 34px;
			}
			#img2{
				margin-left: 23%;
			}
			.span3,.span4{
				font-size: 14px;
				line-height: 49px;
			}
			.span3{
				margin-left: 144px;
			}
			#img2{
				margin-left: 23%;
			}
			#img3{
				margin-top: 2px;
				right: 82px;
			}
			.span4{
				right: 25px;
			}
			
			/* 剩余时间 */
			#top_h{
				width: 100%;
				height: 40px;
				margin-left: -4px;	
				margin-top: -15px;
			}
			.top_li{
				width: 48%;
				height: 40px;
				background-image: url(textures/bg_timer.png);
				background-size: 100% 40px;
			}
			.top_l1{
				float: left;
				margin-left: -18px;
			}
			.top_l2{
				float: right;
			}
			.top_img{
				width: 50px;
				height: 45px;
				position: absolute;
				left: 3px;
			}
			#top_h span{
				font-size: 12px;
			}
			.top_span1{
				color: #f6f877;
				position: absolute;
				margin-top: 4px;
				margin-left: 26px;
			}
			.top_span2{
				color: #79e4ed;
				position: absolute;
				margin-top: 4px;
				margin-left: 76px;
			}
			.top_span3{
				margin-left: 118px;
			}
			.top_img1{
				width: 60px;
				height: 5px;
				position: absolute;
				left: 53.5px;
				top: 75px;
				z-index: 2;
			}
			.top_img2{
				width: 136px;
				height: 8px;
				position: absolute;
				left: 52px;
				top: 74px;
			}
			.top_imga{
				width: 55px;
				height: 50px;
				position: absolute;
				right: 148px;
			}
			.top_imgb{
				width: 45px;
				height: 48px;
				position: absolute;
				right: 155px;
				top: 49px;
			}
			.top_img3{
				width: 36px;
				height: 5px;
				position: absolute;
				right: 118.55px;
				top: 75px;
				z-index: 2;
			}
			.top_img4{
				width: 136px;
				height: 8px;
				position: absolute;
				right: 21px;
				top: 74px;
			}
			
			/* 信息 */
			.btn_message{
				width: 55px;
				height: 48px;
				margin-top: 10px;
			}
			
			/* 底部 */
			#bottom{
				width: 100%;
				height: 180px;
				position: absolute;
				bottom: 5px;
				left: 0;
			}
			#ul1{
				width: 86%;
				height: 76px;
				position: absolute;
				bottom: 76px;
				left: 2%;
				background-image: url(textures/bg_sub_btns.png);
				background-size: 100% 90px;
			}
			#div_img{
				width: 80px;
				height: 24px;
				background-image: url(textures/btn_expand_slot.png);
				background-size: 100% 24px;
				position: absolute;
				bottom: 154px;
				left: 40%;
				z-index: 10;
			}
			.img_ul{
				width: 62px;
				height: 20px;
				position: absolute;
				top: 5px;
				left: 9px;
			}
			#ul2{
				width: 90%;
				height: 86px;
				position: absolute;
				bottom: -5px;
				left: 0;
				background-image: url(textures/bg_main_btns.png);
				background-size: 100% 86px;
			}
			.li1{
				width: 13%;
				height: 70px;
				float: left;
				margin-top: 10px;
			}
			.li_l{
				margin-left: 8px;
			}
			.img3{
				width: 100%;
				height: 40px;
				margin-top: 7px;
			}
			.imga{
				width: 40px;
				height: 26px;
				position: absolute;
				top: 46px;
			}
			.img_1{
				left: 42px;
			}
			.img_2{
				left: 98px;
			}
			.img_3{
				left: 150px;
			}
			.img_4{
				right: 150px;
			}
			.img_5{
				right: 98px;
			}
			.img_6{
				right: 42px;
			}
			.li2{
				width: 13%;
				height: 70px;
				float: left;
				margin-top: 10px;
			}
			.li_l1{
				margin-left: -12px;
			}
			.li_l2{
				margin-left: 13px;
			}
			.li2 img{
				width: 100%;
				height: 56px;
				margin-top: 5px;
			}
			
		</style>
	</head>
	<body>
		<!-- 头部三个框框 -->
		<div id="top">
			<ul id="ul">
				<li id="li1">			
					<img src="textures/bg_status.png" class="img">
					<img src="textures/icon_rank.png" id="img1">
					<span id="span1">99</span>
					<span class="span2">
						卢克断手者
					</span>
				</li>
				<li>
					<img src="textures/bg_status.png" class="img img1">
					<img src="textures/icon_diamond.png" id="img2">
					<span class="span2 span3">
						6688999
					</span>
				</li>
				<li>
					<img src="textures/bg_status.png" class="img img2">
					<img src="textures/icon_gold.png" id="img3">
					<span class="span2 span4">
						999999
					</span>
				</li>
			</ul>
		</div>
		<!-- 剩余时间显示 -->
		<div id="top_h">
			<ul>
				<li class="top_li top_l1">
					<img class="top_img" src="textures/icon_fight.png" >
					<span class="top_span1">剩余时间</span>
					<span class="top_span2">0:08</span>
					<span class="top_span1 top_span3">57/120</span>
					<img class="top_img1" src="textures/timer_bar.png" >
					<img class="top_img2" src="textures/timer_slot.png" >
				</li>
				<li class="top_li top_l2">
					<img class="top_imgb" src="textures/icon_energy.png" >
					<span class="top_span1">剩余时间</span>
					<span class="top_span2">1:23</span>
					<span class="top_span1 top_span3">12/80</span>
					<img class="top_img3" src="textures/timer_bar.png" >
					<img class="top_img4" src="textures/timer_slot.png" >
				</li>
			</ul>
		</div>
		<!-- 信息按钮 -->
		<img class="btn_message" onclick="change()" src="textures/btn_message.png" >
		<!-- 底部显示 -->
		<div id="bottom">
			<div id="div_img">
				<img class="img_ul" src="textures/btn_fold.png" >
			</div>
			<ul id="ul1">
				<li class="li1">
					<img class="img3" src="./textures/home_btns/btn_backpack.png" >
					<img class="img_1 imga" src="./textures/txt_beibao.png" >
				</li>
				<li class="li1 li_l">
					<img class="img3" src="./textures/home_btns/btn_rongyu.png" >
					<img class="img_2 imga" src="./textures/txt_rongyu.png" >
				</li>
				<li class="li1 li_l">
					<img class="img3" src="./textures/home_btns/btn_liuyan.png" >
					<img class="img_3 imga" src="./textures/txt_liuyan.png" >
				</li>
				<li class="li1 li_l">
					<img class="img3" src="./textures/home_btns/btn_renwu.png" >
					<img class="img_4 imga" src="./textures/txt_renwu.png" >
				</li>
				<li class="li1 li_l">
					<img class="img3" src="./textures/home_btns/btn_chuzhan.png" >
					<img class="img_5 imga" src="./textures/txt_chuzhan.png" >
				</li>
				<li class="li1 li_l">
					<img class="img3" src="./textures/home_btns/btn_hecheng.png" >
					<img class="img_6 imga" src="./textures/txt_hecheng.png" >
				</li>
			</ul>
			<ul id="ul2">
				<li class="li2 li_l1">
					<img src="textures/home_btns/btn_home.png" >
				</li>
				<li class="li2 li_l2">
					<img src="textures/home_btns/btn_level.png" >
				</li>
				<li class="li2 li_l2">
					<img src="textures/home_btns/btn_raid.png" >
				</li>
				<li class="li2 li_l2">
					<img src="textures/home_btns/btn_shop.png" >
				</li>
				<li class="li2 li_l2">
					<img src="textures/home_btns/btn_friends.png" >
				</li>
				<li class="li2 li_l2">
					<img src="textures/home_btns/btn_setting.png" >
				</li>
			</ul>
		</div>
	</body>
</html>
